<template>
  <div class="warningStatics table_container">
    <div class="data_statistics">
      <div class="statisTitle" v-for="(t,i) in statisList" :key="'title_'+i">
        <div class="title_content">
          <div class="title_number">
            {{ t.number }}
          </div>
          <div class="title_name">
            {{ t.name }}
          </div>
        </div>
        <div class="icon_border">
          <SvgIcon :font="t.icon" :size="40" />
        </div>
      </div>
    </div>
    <div class="warning_trend">
      <div class="person_trend">
        <div class="title">
          <div class="color_cube" />
          <p class="title_font">
            人员预警趋势
          </p>
          <div class="time_picker">
            <div :class="personTimer==='hour'?'chosen':''" @click="togglePerson('hour')">
              按小时
            </div>
            <p>|</p>
            <div :class="personTimer==='day'?'chosen':''" @click="togglePerson('day')">
              按天
            </div>
            <p>|</p>
            <div :class="personTimer==='month'?'chosen':''" @click="togglePerson('month')">
              按月
            </div>
          </div>
        </div>
        <div class="person_bar" ref="personBar" />
      </div>
      <div class="vehicle_trend">
        <div class="title">
          <div class="color_cube" />
          <p class="title_font">
            车辆预警趋势
          </p>
          <div class="time_picker">
            <div :class="vehicleTimer==='hour'?'chosen':''" @click="toggleVehicle('hour')">
              按小时
            </div>
            <p>|</p>
            <div :class="vehicleTimer==='day'?'chosen':''" @click="toggleVehicle('day')">
              按天
            </div>
            <p>|</p>
            <div :class="vehicleTimer==='month'?'chosen':''" @click="toggleVehicle('month')">
              按月
            </div>
          </div>
        </div>
        <div class="vehicle_bar" ref="vehicleBar" />
      </div>
    </div>
    <div class="warning_origin">
      <div class="person_type">
        <div class="title">
          <div class="color_cube" />
          <p class="title_font">
            预警人员类型
          </p>
        </div>
        <div class="person_type_pie" ref="personTypePie" />
      </div>
      <div class="person_origin">
        <div class="title">
          <div class="color_cube" />
          <p class="title_font">
            人员预警来源分布
          </p>
        </div>
        <div class="person_origin_pie" ref="personOriginPie" />
      </div>
      <div class="vehicle_origin">
        <div class="title">
          <div class="color_cube" />
          <p class="title_font">
            车辆预警来源分布
          </p>
        </div>
        <div class="vehicle_origin_pie" ref="vehicleOriginPie" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import { getPersonWarningData, getVehicleWarningData, getStatisticsData, getTypeAndOriginData } from '@/api/dataStatistics'

// 数据初始化
interface barD {
  name: string
  number: number
}
interface pieD {
  value: number
  name: string
}
const initDatas = () => ({
  statisList: [
    {
      name: '当日预警',
      number: 2000,
      icon: 'yujingrenyuan'
    },
    {
      name: '历史预警数据',
      number: 213,
      icon: 'yujingrenyuan'
    },
    {
      name: '在控人员总数',
      number: 192,
      icon: 'yujingrenyuan'
    },
    {
      name: '在控车辆总数',
      number: 1871,
      icon: 'yujingcheliang'
    },
    {
      name: '过期/撤销布控',
      number: 912,
      icon: 'qunfengguoqi'
    }
  ],
  personTimer: 'hour',
  vehicleTimer: 'hour',
  personData: [] as barD[],
  vehicleData: [] as barD[],
  personType: [] as pieD[],
  personOrigin: [] as pieD[],
  vehicleOrigin: [] as pieD[],
  personBarOptions: {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: '15%',
      right: '5%',
      left: '10%',
      bottom: '15%'
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        data: [] as string[],
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#fff',
          interval: 0,
          textStyle: {
            fontSize: 14
          }
        }
      }
    ],
    yAxis: {
      name: '',
      nameTextStyle: {
        color: '#fff'
      },
      axisLabel: {
        formatter: '{value}',
        color: '#fff'
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(0, 0, 0, 0.2)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(0, 0, 0, 0.2)'
        }
      }
    },
    series: [
      {
        name: '人员预警',
        type: 'bar',
        barWidth: 15,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: '#22CCE2' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#09B66D' // 100% 处的颜色
              }
            ],
            false
          ),
          barBorderRadius: [30, 30, 0, 0]
        },
        data: [] as number[]
      }
    ]
  },
  vehicleBarOptions: {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: '15%',
      right: '5%',
      left: '10%',
      bottom: '15%'
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        data: [] as string[],
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#fff',
          interval: 0,
          textStyle: {
            fontSize: 14
          }
        }
      }
    ],
    yAxis: {
      name: '',
      nameTextStyle: {
        color: '#fff'
      },
      axisLabel: {
        formatter: '{value}',
        color: '#fff'
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(0, 0, 0, 0.2)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(0, 0, 0, 0.2)'
        }
      }
    },
    series: [
      {
        name: '车辆预警',
        type: 'bar',
        barWidth: 15,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: '#FDBF5E' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#FF8A48' // 100% 处的颜色
              }
            ],
            false
          ),
          barBorderRadius: [30, 30, 0, 0]
        },
        data: [] as number[]
      }
    ]
  },
  personTypePieOptions: {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      right: '15%',
      top: '20%',
      orient: 'vertical',
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '预警人员类型',
        type: 'pie',
        radius: [80, 100],
        center: ['40%', '50%'],
        data: [] as any[],
        label: {
          show: false
        }
      }
    ]
  },
  personOriginPieOptions: {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      right: '15%',
      top: '20%',
      orient: 'vertical',
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '预警人员来源分布',
        type: 'pie',
        center: ['40%', '50%'],
        data: [] as { name: string; value: number; }[],
        label: {
          show: false
        }
      }
    ]
  },
  vehicleOriginPieOptions: {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      right: '15%',
      top: '20%',
      orient: 'vertical',
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '预警车辆来源分布',
        type: 'pie',
        center: ['40%', '50%'],
        data: [] as { name: string; value: number; }[],
        label: {
          show: false
        }
      }
    ]
  }
})

// 参数
const personData = ref(initDatas().personData)
const vehicleData = ref(initDatas().vehicleData)
const personType = ref(initDatas().personType)
const personOrigin = ref(initDatas().personOrigin)
const vehicleOrigin = ref(initDatas().vehicleOrigin)
const personTimer = ref(initDatas().personTimer)
const vehicleTimer = ref(initDatas().vehicleTimer)
const statisList = ref(initDatas().statisList)

// 切换人员图表时间范围
const togglePerson = (type: string) => {
  personTimer.value = type
  getPersonBarData()
}
// 切换车辆图表时间范围
const toggleVehicle = (type: string) => {
  vehicleTimer.value = type
  getVehicleBarData()
}
// 初始化上方统计框数据
const initStatis = async () => {
  const res = await getStatisticsData()
  statisList.value[0].number = res.warn_today
  statisList.value[1].number = res.warn_total
  statisList.value[2].number = res.dispatch_person
  statisList.value[3].number = res.dispatch_car
  statisList.value[4].number = res.expire_total
}
// 初始化人员预警柱状图
const personBarOptions = ref(initDatas().personBarOptions)
const personBar = ref()
const initPersonBar = (data: { name: string; number: number; }[]) => {
  const names: string[] = []
  const datas: number[] = []
  data.forEach((t: { name: string; number: number; }) => {
    names.push(t.name)
    datas.push(t.number)
  })
  personBarOptions.value.xAxis[0].data = names
  personBarOptions.value.series[0].data = datas
  const personBarEcharts = echarts.init(personBar.value)
  personBarEcharts.setOption(personBarOptions.value)
  window.addEventListener('resize', () => {
    personBarEcharts.resize()
  })
}
// 初始化车辆预警柱状图
const vehicleBarOptions = ref(initDatas().vehicleBarOptions)
const vehicleBar = ref()
const initVehicleBar = (data: { name: string; number: number; }[]) => {
  const names: string[] = []
  const datas: number[] = []
  data.forEach((t: { name: string; number: number; }) => {
    names.push(t.name)
    datas.push(t.number)
  })
  vehicleBarOptions.value.xAxis[0].data = names
  vehicleBarOptions.value.series[0].data = datas
  const vehicleBarEcharts = echarts.init(vehicleBar.value)
  vehicleBarEcharts.setOption(vehicleBarOptions.value)
  window.addEventListener('resize', () => {
    vehicleBarEcharts.resize()
  })
}
// 初始化预警人员类型饼状图
const personTypePieOptions = ref(initDatas().personTypePieOptions)
const personTypePie = ref()
const initPersonTypePie = (data: { name: string; value: number; }[]) => {
  personTypePieOptions.value.series[0].data = data
  const personTypePieEcharts = echarts.init(personTypePie.value)
  personTypePieEcharts.setOption(personTypePieOptions.value)
  window.addEventListener('resize', () => {
    personTypePieEcharts.resize()
  })
}
// 初始化预警人员来源饼状图
const personOriginPieOptions = ref(initDatas().personOriginPieOptions)
const personOriginPie = ref()
const initPersonOriginPie = (data: { name: string; value: number; }[]) => {
  personOriginPieOptions.value.series[0].data = data
  const personOriginPieEcharts = echarts.init(personOriginPie.value)
  personOriginPieEcharts.setOption(personOriginPieOptions.value)
  window.addEventListener('resize', () => {
    personOriginPieEcharts.resize()
  })
}
// 初始化预警车辆来源饼状图
const vehicleOriginPieOptions = ref(initDatas().vehicleOriginPieOptions)
const vehicleOriginPie = ref()
const initVehicleOriginPie = (data: { name: string; value: number; }[]) => {
  vehicleOriginPieOptions.value.series[0].data = data
  const vehicleOriginPieEcharts = echarts.init(vehicleOriginPie.value)
  vehicleOriginPieEcharts.setOption(vehicleOriginPieOptions.value)
  window.addEventListener('resize', () => {
    vehicleOriginPieEcharts.resize()
  })
}
// 获取Echarts图表数据
const timeStr = {
  hour: '时',
  day: '日',
  month: '月'
}
const getPersonBarData = async () => {
  const res = await getPersonWarningData({ type: personTimer.value })
  personData.value = []
  res.forEach((t: { [x: string]: number; }) => {
    personData.value.push({
      name: Object.keys(t)[0] + timeStr[personTimer.value],
      number: t[Object.keys(t)[0]]
    })
  })
  initPersonBar(personData.value)
}
const getVehicleBarData = async () => {
  const res = await getVehicleWarningData({ type: vehicleTimer.value })
  vehicleData.value = []
  res.forEach((t: { [x: string]: number; }) => {
    vehicleData.value.push({
      name: Object.keys(t)[0] + timeStr[vehicleTimer.value],
      number: t[Object.keys(t)[0]]
    })
  })
  initVehicleBar(vehicleData.value)
}
const getTypeAndOriginDatas = async () => {
  const res = await getTypeAndOriginData()
  personType.value = []
  personOrigin.value = []
  vehicleOrigin.value = []
  Object.keys(res.warn_per_type).forEach(t => {
    personType.value.push({
      name: t,
      value: res.warn_per_type[t]
    })
  })
  Object.keys(res.warn_per_src).forEach(t => {
    personOrigin.value.push({
      name: t,
      value: res.warn_per_src[t]
    })
  })
  Object.keys(res.warn_car_src).forEach(t => {
    vehicleOrigin.value.push({
      name: t,
      value: res.warn_car_src[t]
    })
  })
  initPersonTypePie(personType.value)
  initPersonOriginPie(personOrigin.value)
  initVehicleOriginPie(vehicleOrigin.value)
}
// 初始化
const init = () => {
  initStatis()
  getPersonBarData()
  getVehicleBarData()
  getTypeAndOriginDatas()
}
onMounted(() => {
  init()
})
</script>
<script lang="ts">
export default {
  name: 'WarningStatistics'
}
</script>

<style lang="scss" scoped>
.warningStatics {
  width: 100%;
  height: 100%;
  align-items: flex-start;
  display: flex;
  flex-flow: column nowrap;
  .data_statistics {
    flex: 0 0 20%;
    width: 100%;
    height: 20%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 0 10px;
    .statisTitle {
      height: 100%;
      display: flex;
      margin: 0 10px;
      border-radius: 10px;
      position: relative;
      &:nth-child(1) {
        background: url('@/assets/dataStatistics/card_1.png') no-repeat;
        background-size: 100% 100%;
      }
      &:nth-child(2) {
        background: url('@/assets/dataStatistics/card_2.png') no-repeat;
        background-size: 100% 100%;
      }
      &:nth-child(3) {
        background: url('@/assets/dataStatistics/card_3.png') no-repeat;
        background-size: 100% 100%;
      }
      &:nth-child(4) {
        background: url('@/assets/dataStatistics/card_4.png') no-repeat;
        background-size: 100% 100%;
      }
      &:nth-child(5) {
        background: url('@/assets/dataStatistics/card_5.png') no-repeat;
        background-size: 100% 100%;
      }
      .title_content {
        width: 55%;
        height: 100%;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        margin-left: 20px;
        .title_name {
          width: 100%;
          font-size: 18px;
          color: #fff;
          // font-weight: 700;
        }
        .title_number {
          width: 100%;
          font-size: 36px;
          color: #fff;
          font-weight: 700;
          font-style: 'DIN';
        }
      }
      .icon_border {
        position: absolute;
        width: 50px;
        height: 50px;
        line-height: 50px;
        right: 20px;
        top: 20px;
        background: #ffffff33;
        color: #fff;
        text-align: center;
        border-radius: 10px;
      }
    }
  }
  .warning_trend {
    width: 100%;
    flex: 1;
    display: flex;
    margin-top: 20px;
    .person_trend {
      width: 49%;
      margin-right: 1%;
      margin-left: 10px;
      height: 100%;
      background: #283442;
      border-radius: 10px;
      display: flex;
      flex-flow: column nowrap;
      .person_bar {
        flex: 1;
      }
    }
    .vehicle_trend {
      width: 49%;
      margin-left: 1%;
      height: 100%;
      background: #283442;
      margin-right: 10px;
      border-radius: 10px;
      display: flex;
      flex-flow: column nowrap;
      .vehicle_bar {
        flex: 1;
      }
    }
  }
  .warning_origin {
    width: 100%;
    flex: 1;
    display: flex;
    margin-top: 20px;
    .person_type {
      flex: 1;
      margin-right: 1%;
      margin-left: 10px;
      height: 100%;
      background: #283442;
      border-radius: 10px;
      display: flex;
      flex-flow: column nowrap;
      .person_type_pie {
        flex: 1;
      }
    }
    .person_origin {
      flex: 1;
      margin-right: 1%;
      margin-left: 10px;
      height: 100%;
      background: #283442;
      border-radius: 10px;
      display: flex;
      flex-flow: column nowrap;
      .person_origin_pie {
        flex: 1;
      }
    }
    .vehicle_origin {
      flex: 1;
      margin-right: 1%;
      margin-left: 10px;
      height: 100%;
      background: #283442;
      border-radius: 10px;
      display: flex;
      flex-flow: column nowrap;
      .vehicle_origin_pie {
        flex: 1;
      }
    }
  }
  .title {
    height: 40px;
    line-height: 40px;
    width: 100%;
    border-bottom: 1px solid #8291A940;
    display: flex;
    position: relative;
    .color_cube {
      width: 4px;
      height: 20px;
      margin-top: 10px;
      border-radius: 0 2px 2px 0;
      background: linear-gradient(171deg, #0081FF 0%, #0081FF 0%, #22CCE2 101%, #22CCE2 101%);
    }
    .title_font {
      font-size: 14px;
      font-weight: 1000;
      margin-left: 10px;
    }
    .time_picker {
      position: absolute;
      right: 20px;
      width: 30%;
      height: 30px;
      line-height: 30px;
      display: flex;
      background: #161D26;
      margin: 5px 0 5px 20px;
      border-radius: 5px;
      div {
        flex: 1;
        text-align: center;
        margin: 5px;
        line-height: 20px;
        color: #909399;
        cursor: pointer;
      }
      .chosen {
        background: #0081FF;
        border-radius: 5px;
        box-shadow: 0px 2px 10px 0px #0081FF;
        color: #fff;
      }
    }
  }
}
</style>
